<!-- 用户登录界面 -->
<template>
  <div id="login">
    <div class="bg"></div>
    <el-row class="main-container">
      <el-col :lg="8" :xs="16" :md="10" :span="10">
        <div class="top">
          <i class="iconfont icon-kaoshi"></i><span class="title">心理咨询平台</span>
        </div>
        <div class="bottom">
          <div class="container">
            <p class="title">注册账号</p>
            <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" size="small" ref="form"
                     :rules="rules">
              <el-form-item label="用户名(手机号)" prop="tel">
                <el-input v-model="formLabelAlign.tel" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pwd">
                <el-input v-model="formLabelAlign.pwd" placeholder="请输入密码" type='password'></el-input>
              </el-form-item>
              <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="formLabelAlign.realName" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="cardId">
                <el-input v-model="formLabelAlign.cardId" placeholder="请输入身份证号"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="formLabelAlign.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="角色">
                <el-radio v-model="formLabelAlign.role" :label="1" @change="handleRole">咨询师</el-radio>
                <el-radio v-model="formLabelAlign.role" :label="2" @change="handleRole">咨询者</el-radio>
              </el-form-item>
              <el-form-item label="工作单位" prop="institute" v-if="showTeacher">
                <el-input v-model="formLabelAlign.institute" placeholder="请输入工作单位"></el-input>
              </el-form-item>
              <el-form-item label="擅长" prop="profession" v-if="showTeacher">
                <el-input v-model="formLabelAlign.profession" placeholder="请输入专业"></el-input>
              </el-form-item>
              <el-form-item label="资质" prop="type" v-if="showTeacher">
                <el-input v-model="formLabelAlign.type" placeholder="请输入资质"></el-input>
              </el-form-item>
              <el-row v-if="showTeacher" :gutter="30">
                <el-col :span="12">
                  <el-upload
                    class="upload-demo"
                    action="/api/upload/qualification"
                    :on-success="handleUploadSuccess1"
                    :before-remove="beforeRemove"
                    :file-list="fileList">
                    <el-button size="mini" type="primary">点击上传个人照片</el-button>
                  </el-upload>
                  <div v-if="photo!== ''" style="margin-top: 10px">
                    <img :src="photo" alt="" style="width: 100px;height: 100px">
                  </div>
                </el-col>
                <el-col :span="12">
                  <el-upload
                    class="upload-demo"
                    action="/api/upload/qualification"
                    :on-success="handleUploadSuccess"
                    :before-remove="beforeRemove"
                    :file-list="fileList">
                    <el-button size="mini" type="primary">点击上传资质</el-button>
                  </el-upload>
                  <div v-if="documents!== ''" style="margin-top: 10px">
                    <img :src="documents" alt="" style="width: 100px;height: 100px">
                  </div>
                </el-col>
              </el-row>
              <div class="submit">
                <el-button type="primary" class="row-login" @click="login()" size="small">立即注册</el-button>
              </div>
              <div style="float: right;">
                <router-link class="link-type" :to="'/'">使用已有账户登录</router-link>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import store from '@/vuex/store'
  import { mapState } from 'vuex'

  export default {
    store ,
    name : "login" ,
    data () {
      let checkTel = ( rule , value , callback ) => {
        this.$axios ( {
          url : '/api/checkTel' ,
          method : 'get' ,
          params : {
            tel : this.formLabelAlign.tel
          }
        } ).then ( ( { data } ) => {
          if ( data ) {
            callback ()
          } else {
            callback ( new Error ( '手机号已存在' ) )
          }
        } )
      }
      return {

        role : 2 ,
        labelPosition : 'left' ,
        formLabelAlign : {
          tel : '' ,
          pwd : '' ,
          role : 2 ,
          profession : '' ,
          cardId : '' ,
          institute : '' ,
          type : '' ,
          documents : '' ,
          photo : '' ,
          realName : ''
        } ,
        showTeacher : false ,
        showStu : false ,
        // 文件列表
        fileList : [] ,
        rules : {
          realName : [
            { required : true , message : "姓名不能为空" , trigger : "blur" }
          ] ,
          cardId : [
            { required : true , message : "身份证号不能为空" , trigger : "blur" }
          ] ,
          pwd : [
            { required : true , message : "用户密码不能为空" , trigger : "blur" } ,
            { min : 5 , max : 20 , message : '用户密码长度必须介于 5 和 20 之间' , trigger : 'blur' }
          ] ,
          tel : [
            {
              pattern : /^1[3|4|5|6|7|8|9][0-9]\d{8}$/ ,
              message : "请输入正确的手机号码" ,
              trigger : "blur" ,
              required : true
            } ,
            { validator : checkTel }
          ] ,
          email : [
            {
              type : "email" ,
              message : "请输入正确的邮箱地址" ,
              trigger : ["blur" , "change"] ,
              required : true
            }
          ] ,
        } ,
        documents : '' ,
        photo : ''
      }
    } ,
    methods : {
      //用户登录请求后台处理
      login () {
        this.$refs[ "form" ].validate ( valid => {
          if ( valid ) {
            this.$axios ( {
              url : `/api/register` ,
              method : 'post' ,
              data : {
                ... this.formLabelAlign
              }
            } ).then ( res => {
              this.$message ( {
                message : '注册成功' ,
                type : 'success'
              } )
            } )
          }
        } )
      } ,
      clickTag ( key ) {
        this.role = key
      } ,
      handleRole ( data ) {
        if ( data === 1 ) {
          this.showTeacher = true
        } else {
          this.showTeacher = false
        }
      } ,

      beforeRemove ( file , fileList ) {
        return this.$confirm ( `确定移除 ${ file.name }？` );
      } ,

      handleUploadSuccess ( res ) {
        this.documents = '/api' + res.data
        this.formLabelAlign.documents = res.data
        this.$message ( {
          message : res.message ,
          type : 'success'
        } )
      } ,
      handleUploadSuccess1 ( res ) {
        this.photo = '/api' + res.data
        this.formLabelAlign.photo = res.data
        this.$message ( {
          message : res.message ,
          type : 'success'
        } )

      } ,
    } ,
    computed : mapState ( ["userInfo"] ) ,
    mounted () {

    }
  }
</script>

<style lang="scss" scoped>
  .remind {
    border-radius: 4px;
    padding: 10px 20px;
    display: flex;
    position: fixed;
    right: 20px;
    bottom: 50%;
    flex-direction: column;
    color: #606266;
    background-color: #fff;
    border-left: 4px solid #409eff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
  }

  .container {
    margin-bottom: 32px;
  }

  .container .el-radio-group {
    margin: 30px 0px;
  }

  a:link {
    color: #ff962a;
    text-decoration: none;
  }

  #login {
    font-size: 14px;
    color: #000;
    background-color: #fff;
  }

  #login .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    height: 100%;
    background: url('../../assets/img/loginbg.png') center top / cover no-repeat;
    background-color: #b6bccdd1 !important;
  }

  #login .main-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #login .main-container .top {
    margin-top: 100px;
    font-size: 30px;
    color: #ff962a;
    display: flex;
    justify-content: center;
  }

  #login .top .icon-kaoshi {
    font-size: 80px;
  }

  #login .top .title {
    margin-top: 20px;
  }

  #login .bottom {
    display: flex;
    justify-content: center;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  #login .bottom .title {
    text-align: center;
    font-size: 30px;
  }

  .bottom .container .title {
    margin: 30px 0px;;
  }

  .bottom .submit .row-login {
    width: 100%;
    background-color: #04468b;
    border-color: #04468b;
    margin: 20px 0px 10px 0px;
    padding: 15px 20px;
  }

  .bottom .submit {
    display: flex;
    justify-content: center;
  }

  .footer {
    margin-top: 50px;
    text-align: center;
  }

  .footer .msg1 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 15px;
  }

  .footer .msg2 {
    font-size: 14px;
    color: #e3e3e3;
    margin-top: 70px;
  }

  .bottom .options {
    margin-bottom: 40px;
    color: #ff962a;
    display: flex;
    justify-content: space-between;
  }

  .bottom .options > a {
    color: #ff962a;
  }

  .bottom .options .register span:nth-child(1) {
    color: #8C8C8C;
  }
</style>
